<template>
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="30%"
      @close="handleClose"
    >
      <slot></slot>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </el-dialog>
  </template>
  
  <script>
  export default {
    props: {
      title: {
        type: String,
        default: '提示'
      },
      visible: {
        type: Boolean,
        default: false
      },
      path: {
        type: String,
        default: ''
      }
    },
    methods: {
      handleClose() {
        this.$emit('update:visible', false);
      },
      handleConfirm() {
        if (this.path) {
          this.$router.push(this.path);
        }
        this.$emit('confirm');
        this.handleClose();
      }
    }
  };
  </script>
  
  <style scoped>
  .dialog-footer {
    text-align: right;
  }
  </style>